import * as echarts from 'echarts'

// 民生事件统计-近30日情感指数变化趋势
export const emotionIndexLineChart = (id, data) => {
  const seriesData = data.series[0].data
  // var minVal = Math.min.apply(null, seriesData);
  const option = {
    grid: {
      containLabel: true,
      top: 10,
      left: 5,
      right: 5,
      bottom: 10
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(9, 20, 37, 0.75)',
      borderWidth: 1,
      textStyle: {
        fontSize: 12,
        color: '#fff',
        fontFamily: 'PingFang-SC-Medium'
      }
    },
    legend: {
      show: false
    },
    xAxis: [
      {
        show: true,
        boundaryGap: false,
        type: 'category',
        data: data.xaxis,
        axisTick: {
          // 轴刻度
          show: false
        },
        axisLabel: {
          // 轴文字
          show: true,
          color: '#666',
          fontSize: 11
        },
        axisLine: {
          // 坐标轴线
          show: true,
          lineStyle: { color: 'rgba(0,0,0,0.1)' }
        }
      }
    ],
    yAxis: {
      type: 'value',
      axisTick: {
        // 轴刻度
        show: false
      },
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          // 分割线
          color: 'rgba(0,0,0,0.07)',
          type: 'dashed',
          width: 1
        }
      },
      axisLabel: {
        // 轴文字
        show: true,
        color: '#666',
        fontSize: 11
      },
      axisLine: {
        // 轴线
        show: true,
        lineStyle: { color: 'rgba(0,0,0,0.1)' }
      }
    },
    series: [
      {
        smooth: true,
        type: 'line',
        stack: 'Total',
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: '#2E8AE6'
        },
        areaStyle: {
          opacity: 0.4,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(46, 138, 230, 1)'
            },
            {
              offset: 1,
              color: 'rgba(255, 255, 255, 0)'
            }
          ])
        },
        data: seriesData
      }
    ]
  }
  const myChart = echarts.init(document.getElementById(id))
  myChart.setOption(option)
}

// 30天热词 折线图
export const hotWordLineChart = (id, data) => {
  // y轴字体颜色
  const Ytextcolor = '#21212199'
  // x轴字体颜色
  const Xtextcolor = '#21212199'
  // y,x轴线颜色
  const Ylinecolor = '#bfbfbf'
  // 内测y,x轴线颜色
  const withinLinecolor = '#e6e6e6'
  //   线段 背景渐变
  const lineColors = [
    {
      line: '#FF9219', //   线段颜色
      gradientStart: 'rgba(255,146,25,0.3)', //   渐变
      gradientEnd: 'rgba(255,255,255,0)' //
    }
  ]

  const option = {
    tooltip: {
      trigger: 'axis',
      // backgroundColor: "#fff",
      backgroundColor: 'rgba(9, 20, 37, 0.75)',
      borderWidth: 1,
      textStyle: {
        fontSize: 14,
        // color: "#999",
        color: '#fff',
        fontFamily: 'PingFang-SC-Medium'
      },
      axisPointer: {
        type: 'line',
        lineStyle: {
          // type: 'solid',       //打开就是实线类型
          color: lineColors[0].line
        }
      },
      valueFormatter: value => value + data.unit
    },
    grid: {
      top: '15%',
      left: '1%',
      right: '5%',
      bottom: '4%',
      containLabel: true
    },
    legend: {
      show: true,
      selected: '',
      data: data.legends,
      top: '10%',
      right: '10%',
      textStyle: {
        color: Ytextcolor,
        fontSize: '14',
        fontFamily: 'PingFang-SC-Medium'
      },
      icon: 'rect',
      itemWidth: 12,
      itemHeight: 2
    },
    xAxis: {
      axisTick: {
        show: false,
        inside: true
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        textStyle: {
          color: Xtextcolor
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: Ylinecolor
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: withinLinecolor
        }
      },
      type: 'category',
      boundaryGap: false,
      data: data.xaxis
    },

    yAxis: {
      min: function (value) {
        // 取最小值向下取整为最小刻度
        return Math.floor(value.min)
      },
      max: function (value) {
        // 取最大值向上取整为最大刻度
        return Math.ceil(value.max)
      },
      // name: "车辆数" + "/" + data.unit,
      // name: data.unit || '',
      nameTextStyle: {
        color: Ytextcolor,
        fontSize: 12
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: withinLinecolor
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: Ylinecolor
        },
        interval: 'auto',
        formatter: '{value}(%)'
      },

      axisLabel: {
        // y轴文字的配置
        textStyle: {
          color: Ytextcolor,
          fontSize: 12
        },
        formatter: (val, key) => {
          if (key % 2 == 0) {
            return val
          }
        }
        // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
      }
    },
    series: [
      {
        type: 'line',
        data: data.series[0].data,
        name: data.xaxis,
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 8, // 标记的大小
        itemStyle: {
          normal: {
            color: '#fff', // 拐点颜色
            borderColor: lineColors[0].line,
            borderWidth: 1,
            lineStyle: {
              width: 2,
              shadowColor: 'rgb(0, 0, 0,.16)',
              shadowBlur: 10,
              shadowOffsetY: 10
            }
          },
          emphasis: {
            color: lineColors[0].line,
            borderColor: '#fff',
            borderWidth: 2
          }
        },
        lineStyle: {
          normal: {
            color: lineColors[0].line
          },
          borderColor: lineColors[0].line
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: lineColors[0].gradientStart
            },
            {
              offset: 1,
              color: lineColors[0].gradientEnd
              //   color: "transparent",
            }
          ]),
          borderColor: lineColors[0]
        }
      }
    ]
  }
  const client = document.getElementById(id)
  const myChart = echarts.init(client)
  const clientWidth = client.clientWidth
  myChart.clear()
  myChart.resize({ width: clientWidth })
  myChart.setOption(option)
}
